<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery广告弹窗</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        #ad{
            width:300px;
            height:300px;
            background-color:antiquewhite;
            position:fixed;
            bottom:0;
            right:0;
            display:none;
        }
    </style>
    <script type="text/javascript">
        // setTimeout(function(){
        //     // $("#ad").show();//display block none
        //     $("#ad").show(3000,function(){
        //         console.log("动画播放完成");
        //     });//"slow" | "fast" | 3000
        // },1000);
        // setTimeout(function(){
        //     $("#ad").hide("hide",function(){
        //         console.log("广告不见了");
        //     });
        // },5000);
        // $(function(){
        //     $("#closeBtn").click(function(){
        //         $("#ad").hide();
        //     });
        // });

        // $("xxxxxx").click();

        setTimeout(function(){
            // $("#ad").toggle("slow");
            // $("#ad").slideDown(2000);//slideDown从底部向上滑动出来。
            // $("#ad").slideToggle();
            // $("#ad").fadeIn(1000);
            // $("#ad").fadeToggle(1000);
            $("#ad").fadeTo(1000,1);//0完全透明  1是完全不透明  0.5半透明
        },1000);
        $(function(){
            $("#closeBtn").click(function(){
                // $("#ad").toggle("slow");
                // $("#ad").slideUp(2000);//和slideDown相反，显示完整后，从顶部向下滑动，直至没了。
                // $("#ad").slideToggle();
                // $("#ad").fadeOut(1000);
                $("#ad").fadeToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div id="ad">
        <button id="closeBtn">关闭</button>
    </div>
</body>
</html>